import SiderLeft from '@renderer/components/SiderLeft'
import { ConfigProvider, Layout, theme } from 'antd'
import { Header } from 'antd/es/layout/layout'
import { Outlet } from 'react-router'
import TitleBar from './components/titleBar'
import dayjs from 'dayjs'
import { Time } from '@icon-park/react'
const { Content, Footer } = Layout

export default function App() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()

  const weekOptions = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return (
    <>
      <Layout style={{ height: '100vh', borderRadius: '8px' }}>
        <SiderLeft />
        <Layout className="rounded-lg">
          <ConfigProvider
            theme={{
              components: {
                Layout: {
                  headerHeight: '40px',
                },
              },
            }}>
            <Header style={{ padding: 0, background: colorBgContainer }}>
              <TitleBar />
            </Header>
          </ConfigProvider>
          <Content style={{ margin: '24px 16px 0px' }}>
            <div
              style={{
                padding: 24,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
                height: '100%',
                overflowY: 'auto', // 启用垂直滚动
                scrollbarWidth: 'none', // 隐藏滚动条
              }}>
              {/* 路由出口 */}
              <Outlet />
            </div>
          </Content>
          <Footer
            style={{ textAlign: 'end', background: '#F3F3F3', fontSize: '16px' }}
            className="flex justify-end items-center">
            <Time theme="outline" size="24" fill="#333" className="mr-2" />
            {dayjs(new Date()).format('YYYY年MM月DD日')} {weekOptions[new Date().getDay()]}{' '}
            {dayjs(new Date()).format('HH:mm:ss')}
          </Footer>
        </Layout>
      </Layout>
    </>
  )
}
